<template>
  <div>
    <!-- 面包屑 -->
    <el-bread></el-bread>

    <!-- 表格主体 -->
    <el-table :data="memberList" border style="width: 100%">
      <!--用户编号  -->
      <el-table-column prop="id" label="用户编号" width="180">
      </el-table-column>

      <!-- 昵称 -->
      <el-table-column prop="nickname" label="昵称" width="180">
      </el-table-column>

      <!-- 手机号 -->
      <el-table-column prop="phone" label="手机号"> </el-table-column>

      <!-- 状态 -->
      <el-table-column prop="status" label="状态">
        <template v-slot="{ row }">
          <el-button
            v-if="row.status == 1"
            disabled
            type="success"
            round
            size="small"
            >正常</el-button
          >
          <el-button v-else type="warning" disabled round size="small"
            >禁用</el-button
          >
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            circle
            icon="el-icon-edit"
            @click="edit(row.uid)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination background @current-change="changePage" layout="prev, pager, next" :page-size="pageSize" :total="total">
    </el-pagination>

    <!-- Dialog弹窗 -->
    <v-dialog ref="diaLog"></v-dialog>
  </div>
</template>


<script>
//引入辅助性函数
import { mapState, mapActions } from "vuex";
//引入Dialog
import vDialog from "./dialog.vue";
export default {
  data() {
    return {};
  },

  //计算属性 用来获取vuex中的数据 辅助性函数mapState
  computed: {
    ...mapState("member", ["memberList", "total", "pageSize"]),
  },

  //方法 辅助性函数mapActions 和其他方法
  methods: {
    ...mapActions("member", ["getMember", "getMemberTotal",'getPage']),

    //点击修改事件
    edit(id) {
      //打开弹窗
      this.$store.commit('member/changeDialog',true);
      //传递数据
      this.$refs.diaLog.dataForm(id);
    },

    //切换页码事件
    changePage(e){
      //触发修改页码方法
      this.getPage(e);
    }
  },

  //挂载完成
  mounted() {
    this.getMember();
    this.getMemberTotal();
  },

  //注册组件
  components: {
    vDialog,
  },
};
</script>


<style lang='less' scoped>
//添加按钮的样式
.el-table {
  margin: 30px 0;
}
</style>